<template>
  <div class="home">
    <Header></Header>
    <div class="content g960 clearfix">
      <div class="game clearfix text-left" style="border-bottom: none; padding-bottom: 0;">
        <div class="icon fl">
          <img :src="'/static/img/'+product.imgName" style="max-width: 130px">
        </div>
        <div class="about fl">
          <p class="des">
            游戏名称：<span v-text="product.gameName"></span>
          </p>
          <ul class="clearfix">
            <li>游戏类型： <span v-text="product.gameType"></span></li>
            <li>适应平台：<span v-text="product.advice"></span></li>
          </ul>
          &nbsp;&nbsp;
          <p class="des" style="font-size: 17px;">
            《<span v-text="product.gameName"></span>》Android下载地址：<a :href="product.androidUrl" style="text-decoration: underline" target="_blank">下载</a>
          </p>
          <p class="des" style="font-size: 17px;">
            《<span v-text="product.gameName"></span>》Googleplay下载地址：<a :href="product.googleplayUrl" style="text-decoration: underline" target="_blank">下载</a>
          </p>
          &nbsp;&nbsp;
          <p class="des">游戏介绍：<span v-text="product.summary"></span></p>
        </div>
      </div>
      <div class="game-photo" v-html="decode(product.content)">
        
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
import Header from './fragment/Header.vue'
import Banner from './fragment/Banner.vue'
import Footer from './fragment/Footer.vue'
import { ProductsList } from '../assets/js/data.js'

export default {
  name: 'Home',
  components: { Header, Banner, Footer },
  mounted() { this.getProductById() },
  methods: {
    getProductById() {
      for (var i in ProductsList) {
        if (ProductsList[i].id == parseInt(this.$route.params.id)) {
          this.product = ProductsList[i];
        }
      }
    },
    decode: function(param) {
      var ret = "";
      try { ret = decodeURIComponent(param); } catch (err) { ret = param; }
      return ret;
    }
  },
  data() {
    return {
      ProductsList: ProductsList,
      product:{}
    }
  }
}

</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>


</style>
